<template>
	<div class="main real-box">
		<div class="top-panel">
			<div class="search-pane">
				<div class="search-item-box">
					<a-select size="small" style="width: 200px"></a-select>
				</div>
				<div class="search-item-box">
					<a-select size="small" style="width: 200px"></a-select>
				</div>
				<div class="search-item-box">
					<a-select size="small" style="width: 200px"></a-select>
				</div>
				<div class="search-item-box">
					<a-button type="primary" ghost size="small">查询</a-button>
				</div>
				<div class="search-item-box">
					<a-button type="default" class="reset-btn" size="small">重置</a-button>
				</div>
			</div>
			<div class="btn">
			</div>
		</div>
		<div class="table-box">
			<div class="table-contain">
				<a-table :columns="columns" :data-source="transactionEntities" :rowKey="data => data.id"
				         :loading="loading" :pagination="false" :scroll="{x: 1300}">
					<template slot="type" slot-scope="data">
						<a-tag :color="data.type == 1 ? '#108ee9' : '#f50'">{{ data.type == 1 ? '支付' : '退款' }}</a-tag>
					</template>
					<template slot="createTime" slot-scope="data">
						{{ moment ( data.createTime ).format ( 'YYYY-MM-DD' ) }}
					</template>
				</a-table>
			</div>
			<div class="page-box">
				<a-pagination
					size="small"
					:showQuickJumper="true"
					:showSizeChanger="true"
					:current="page.current"
					:pageSize="page.pageSize"
					:total="page.total"
					:show-total="(total) => `共${total}条`"
					@showSizeChange="onShowSizeChange"
					@change="changePageSize"
				></a-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import {api, post} from "@/api/api";
import moment from "moment";

export default {
	name: "Transaction",
	data() {
		return {
			columns: [
				{title: '交易类型', scopedSlots: {customRender: 'type'}, width: 80},
				{title: '商户订单号', dataIndex: 'outTradeNo', key: 'outTradeNo', width: 300},
				{title: '交易订单号', dataIndex: 'transactionId', key: 'transactionId', width: 300},
				{title: '退款订单号', dataIndex: 'refundId', key: 'refundId', width: 300},
				{title: '支付用户openId', dataIndex: 'openId', key: 'openId', width: 300},
				{title: '交易金额', dataIndex: 'transactionAmount', key: 'transactionAmount', width: 100},
				{title: '用户', dataIndex: 'nickName', key: 'nickName', width: 150},
				{title: '交易时间', scopedSlots: {customRender: 'createTime'}, width: 120},
				{title: '备注', dataIndex: 'reason', key: 'reason', width: 300},
			],
			transactionEntities: [],
			page: {
				current: 1,
				pageSize: 20,
				total: 0,
			},
			loading: true,
			moment,
		}
	},
	created() {
		this.queryList ()
	},
	methods: {
		queryList() {
			post ( api.TransactionEntities, {page: this.page.current, limit: this.page.pageSize} ).then ( res => {
				this.transactionEntities = res.data.data
				this.page.total = res.data.count
				this.loading = false
			} )
		},
		onShowSizeChange( current, pageSize ) {
			this.page.current = current
			this.page.pageSize = pageSize
			this.queryList ()
		},
		changePageSize( current, pageSize ) {
			this.page.current = current
			this.page.pageSize = pageSize
			this.queryList ()
		},
	}
}
</script>

<style scoped>

</style>
